<template>
  <div class="menu">
    <div  v-for="item in menuList" :key="item.id" :class="[{'active': router === item.router}, 'type']" @click="changeType(item.id, item.router)">
      <el-icon>
        <component :is="item.icon"/>
      </el-icon>
      <span class="title">{{item.title}}</span>
    </div>
    <!-- <div class="type" @click="open">
      <el-icon><Setting /></el-icon>
      <span class="title">GPT {{model}}</span>
    </div> -->
  </div>
  <GPTDialog :GPTForm="GPTForm" v-model="GPTDialog" @closeGPTDialog="closeGPTDialog" @submit="submit"></GPTDialog>
</template>

<script>
import GPTDialog from './GPTDialog.vue'
export default {
  components:{
    GPTDialog,
  },
  data() {
    return {
      id: '1',
      router:'/AI/chat',
      menuList: [
        {title: '对话', router:'/AI/chat', icon: 'ChatLineRound', id: '1'},
        {title: '文案', router:'/AI/copywriting', icon: 'Tickets', id: '2'},
        {title: '图片', router:'/AI/picture', icon: 'PictureRounded', id: '5'},
        {title: '文档', router:'/AI/file', icon: 'Notebook', id: '3'},
        {title: '翻译', router:'/AI/TranslationSelect', icon: 'Switch', id: '4'},
        {title: '智库', router:'/AI/knowledgeBase', icon: 'Collection', id: '7'},
        {title: '收藏', router:'/AI/collect', icon: 'Star', id: '8'},
        {title: '关于', router:'/AI/contactUs', icon: 'OfficeBuilding', id: '6'},
      ],
      GPTDialog: false,
      GPTForm: {},
      model: '3.5'
    }
  },
  watch:{
    '$route.path'(value){
      this.router = value
    }
  },
  created(){
    this.router = this.$route.path
  },
  methods:{
    changeType(id, router){
      if(router !== ''){
        this.id = id
        this.$router.push(router)
      }else{
        this.$message.info('该功能开发中')
      }
    },
    closeGPTDialog(){
      this.GPTDialog = false
    },
    open(){
      this.GPTForm.model = this.model
      this.GPTDialog = true
    },
    submit(model){
      this.model = model
      this.GPTDialog = false
    }
  }
}

</script>

<style lang="scss" scoped>
  .menu{
    flex-shrink: 0;
    width: 65px;
    height: calc(100vh - 50px);
    text-align: center;
    background: #fff;
    // border-right: 1px solid #e0e6ed;
    .type{
      cursor: pointer;
      height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title{
        font-size: 14px;
        padding-top: 10px;
      }
    }
    .active{
      color: #fecf55;
      background-color: #5c7c99
    }
  }
</style>>
  